<template>
  <div class="const_box">
    <div class="pop-up" v-if="editVisible">
      <i class="el-icon-error" @click="handleClose"></i>
      <div class="pop-up-back">
        <div>宿舍用电能耗统计</div>
        <div>
          <el-select v-model="building_value4" placeholder="请选择" size="small" class="select_build" style="width: 150px"
            @change="handlePower">
            <el-option v-for="item in AllbuildingList" :key="item.areaCode" :label="item.areaName" :value="item.areaCode">
            </el-option>
          </el-select>
          <div class="select_build">
            <el-date-picker v-model="monthValue" value-format="YYYY-MM" :clearable="false" type="month" placeholder="选择"
              @change="changeMonth">
            </el-date-picker>
          </div>
        </div>
        <div ref="electro_power" style="width: 1800px; height: 600px"></div>
      </div>
    </div>
  </div>
</template>
<script>
import { ref, reactive, onMounted } from "vue";
import * as echarts from "echarts";
import api from "../api/api";
var barChartOptions = {
  title: {},
  tooltip: {
    trigger: "axis",
    axisPointer: {
      // 坐标轴指示器，坐标轴触发有效
      type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
    },
  },

  grid: {
    x: "1%", //距离左边
    x2: "1%", //距离右边
    y: "10%", // 上距离
    y2: "10%", // 下距离
    containLabel: true,
  },
  dataZoom: [
    {
      //默认为滚动条型数据区域缩放组件
      show: true,
      zoomLock: false,
      start: 60,
      end: 0,
    },
  ],
  formatter: function (params) {
    var texts = "";
    texts +=
      "总电量" + "<br>" + params[0].data.name + "<br>" + params[0].data.value;
    return texts;
  },
  xAxis: {
    type: "category",
    splitLine: { show: false },
    data: [],
    axisLabel: {
      interval: 0,
      show: true,
      textStyle: {
        color: "#fff",
      },
    },
  },
  yAxis: {
    type: "value",
    axisLabel: {
      show: true,
      textStyle: {
        color: "#fff",
      },
    },
  },
  series: [
    {
      name: "总电量",
      type: "bar",
      stack: "总电量",
      label: {
        show: true,
        position: "top",
      },
      data: [900, 345, 393, "-", "-", 135, 178, 286, "-", "-", "-"],
    },
  ],
  series: [
    {
      name: "用量",
      type: "bar",
      stack: "Total",
      barWidth: "40%",
      data: [],
      axisLabel: {
        show: true,
        textStyle: {
          color: "#ffffff",
        },
      },
      itemStyle: {
        normal: {
          color: "#0d6ece",
        },
      },
    },
  ],
};
export default {
  setup(props, conts) {
    // 获取标签容器
    const electro_power = ref(null);
    const editVisible = conts.attrs.editVisible;
    const building_value4 = ref(conts.attrs.building_value4);
    const monthValue = ref();
    const AllbuildingList = conts.attrs.AllbuildingList;
    onMounted(async () => {
      // 初始化
      getDormitoryEnergy(building_value4.value);
    });
    const handlePower = (res) => {
      getDormitoryEnergy(res);
    };
    const changedata = () => { };
    const handleClose = () => {
      conts.emit("handleClose", false);
    };
    //宿舍用电能耗排名
    const getDormitoryEnergy = (queryAreaCode, queryYearNum, queryMonthNum) => {
      var roomNum = [];
      var electricityAmountstatistics = [];
      let barChart = echarts.init(electro_power.value);
      api
        .postFormAPI("backup/indexData/regionElectricity", {
          queryYearNum: queryYearNum,
          queryMonthNum: queryMonthNum,
          queryAreaCode: queryAreaCode,
          querySortElectricity: null,
        })
        .then((res) => {
          if (res.data.code == 1) {
            for (var i = 0; i < res.data.data.length; i++) {
              if (res.data.data[i].roomNum.length > 4) {
                var roomname = res.data.data[i].roomNum.substring(0, 3);
                roomNum.push(roomname);
              } else {
                roomNum.push(res.data.data[i].roomNum);
              }
              electricityAmountstatistics.push({
                value: res.data.data[i].electricityRecord,
                name: res.data.data[i].roomNum,
              });
            }
            barChartOptions.series[0].data = electricityAmountstatistics;
            barChartOptions.xAxis.data = roomNum;
            barChart.setOption(barChartOptions);
            window.onresize = function () {
              //自适应大小, 不用的话不会自适应大小。
              barChart.resize();
            };
          }
        });
    };
    const changeMonth = (res) => {
      var arr = res.split("-");
      getDormitoryEnergy(building_value4.value, Number(arr[0]), Number(arr[1]));
    };
    return {
      monthValue,
      building_value4,
      AllbuildingList,
      editVisible,
      electro_power,
      changedata,
      handlePower,
      handleClose,
      changeMonth,
    };
  },
};
</script>
<style lang="less" scoped>
@import "../assets/css/common.css";

.upload-demo &:deep(.el-upload--text) {
  height: 50px;
  width: auto;
  border: 0;
}

&:deep(.el-upload-list__item-name) {
  display: none;
}

.pop-up {
  position: fixed;
  z-index: 99;
  height: 100%;
  width: 100%;
  top: 10%;
  background: #2e2c2c78;
}

.el-icon-error {
  position: fixed;
  top: 10%;
  right: 10%;
  color: rgb(230, 231, 236);
  font-size: 38px;
}

.pop-up .pop-up-back>div {
  padding: 10px 0;
  display: flex;
  flex-direction: row;
  flex-wrap: row;
  justify-content: center;
}

.pop-up .pop-up-back {
  overflow-x: auto;
  position: fixed;
  color: #fff;
  width: 80%;
  height: 80%;
  top: 15%;
  left: 12%;
  background: rgba(49, 57, 73, 0.788);
}

#electric_leakage {
  overflow-x: auto;
}

.select_build {
  margin-left: 30px;
}

&:deep(.el-input__inner) {
  width: 150px !important;
}

&:deep(.el-input) {
  width: 150px !important;
}
</style>
